// pages/fenxianghaibao/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    loadProgress: 0,

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        let clientHeight = res.windowHeight;
        let clientWidth = res.windowWidth;
        let ratio = 750 / clientWidth;
        let height = clientHeight * ratio;
        that.setData({
          height: height
        });
        console.log("heightheight", height)
      }
    });

    var _this = this
    var sd = wx.getStorageSync('ziji').avatarUrl
    console.log("数据哦", this.data.touxian)
    console.log(options, "pppppppppppppppp", sd)
    wx.downloadFile({
      url: options.touxiang,
      success(res) {
        console.log(res)
        _this.setData({
          touxiang: res.tempFilePath,
       
        })
      }
    })
    wx.downloadFile({
      url: options.erwei,
      success(res) {
        _this.setData({
          erwei: res.tempFilePath
        })

      }
    })
    wx.downloadFile({
      url: options.zhutu,
      success(res) {

        _this.setData({
          zhutu: res.tempFilePath
        })

      }
    })
    console.log("数据哦", this.data.touxian)

    this.loadProgress()
    console.log("数据哦", this.data)

  },
  shengcheng: function() {
    _this.shengcheng();
  },
  shengcheng: function() {
    var ctx = wx.createCanvasContext('customCanvas')
    var width = ""
    var avaterSrc = this.data.zhutu
    var touxiang = this.data.touxiang
    var name = this.data.nickName
    var erweima = this.data.erwei
    // var text = "长按保存到本地分享"
    wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function(rect) {
      console.log(rect, "view参数")
      var height = rect.height;
      var right = rect.right;

      width = rect.width;
      var left = rect.left - rect.left;
      ctx.setFillStyle('#fff');
      ctx.fillRect(0, 0, rect.width, height);
      // 底图
      if (avaterSrc) {

        // 生成图片     图片     距离左  上     图片大小
        ctx.drawImage(avaterSrc, left, 0, width, height);
        // 设置字号
        // ctx.setFontSize(14);
        // ctx.setFillStyle('#fff');
        // ctx.setTextAlign('left');
      }
      //头像
      if (touxiang) {
        // 靠左边距离  总宽度  减去元素宽度 /2
        var left = rect.width - 80;

        var left = left / 2
        var lefts = left / 8.5
        var canvas = ctx
        canvas.fill();
        canvas.save();
        canvas.beginPath() //开始创建一个路径
          // lefts 距离左边    距离下边     40 圆圈大小 0就是圆形
        canvas.arc(lefts + 50, height-height/2+105, 36, 0, 2 * Math.PI, false) 
        //画一个圆形裁剪区域
      
        canvas.clip() //裁剪
        // 外边圈线
        canvas.stroke();
        canvas.drawImage(touxiang, lefts, height - height / 2+50, 95, 95) 
        //绘制图片

        canvas.restore() //恢复之前保存的绘图上下文
      }

      //当前用户微信名
      // if (name) {
      //   ctx.setFontSize(20) //设置字体大小，默认10
      //   var s = ctx.measureText(name).width;
      //   var left = rect.width - s
      //   var left = (left) / 2
      //   ctx.setFillStyle('#ffffff') //文字颜色：默认黑色

      //   ctx.fillText(name, left, 160) //绘制文本

      // }


      if (erweima) {
        var leftd = (rect.width -110)/2;


        canvas.drawImage(erweima, leftd, height-height/3.5 , 110, 110) //绘制图片
      }

      // 长按保存到本地
      // if (text) {
      //   ctx.setFontSize(15) //设`置字体大小，默认10
      //   var s = ctx.measureText(text).width;
      //   var left = rect.width - s
      //   var left = left / 2
      //   ctx.setFillStyle('#000') //文字颜色：默认黑色

      //   ctx.fillText(text, left, 380) //绘制文本

      // }


    }).exec()
    setTimeout(function() {
      //调用draw()开始绘制
      ctx.draw();
    }, 5000)

  },



  // 顶部加载条
  loadProgress() {
    this.setData({
      loadProgress: this.data.loadProgress + 1
    })
    if (this.data.loadProgress < 100) {
      // this.shengcheng();
      setTimeout(() => {
        this.loadProgress();
      }, 100)
      this.shengcheng();


    } else {
      this.setData({
        loadProgress: 0
      })
    }
  },





  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },
  baocun: function() {
    setTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: 'customCanvas',
        fileType: "jpg",
        success: (res) => {
          console.log(res)
          var tempFilePath = res.tempFilePath;
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success(res) {
              wx.showModal({
                content: '图片已保存到相册，赶紧晒一下吧~',
                showCancel: false,
                confirmText: '好的',
                confirmColor: '#333',
                success: function(res) {
                  console.log(res, 11111)
                  if (res.confirm) {}
                },
                fail: function(res) {
                  console.log(res, "6666")
                }
              })
            },
            fail: function(res) {
              console.log(res, "kkk")
              if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                console.log("打开设置窗口");
                _this.setData({
                  xianshi: true
                })
                // wx.openSetting({
                //   success(settingdata) {
                //     console.log(settingdata,"settingdata")
                //     if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                //       console.log("获取权限成功，再次点击图片保存到相册")
                //     } else {
                //       console.log("获取权限失败")
                //     }
                //   }
                // })
              }
            }

          })
        }
      })
    }, 500)
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})